<template>
  <div id="bottom-bar">
    <div class="left">
      <checked-button :isChecked="judgeChecked" @click="checkedAll" ref="button"/>
      <span>全选</span>
    </div>
    <div class="center">合计￥:{{calcTotal}}</div>
    <div class="right" @click="checkOut">去计算({{toCalc}})</div>
    <toast ref="toast"/>
  </div>
</template>

<script>
  import CheckedButton from "@/components/content/checkedButton/CheckedButton";
  import Toast from "@/components/common/toast/Toast";

  export default {
    name: "CartBottomBar",
    components:{
      CheckedButton,
      Toast,
    },
    computed:{
      judgeChecked(){
        // 原始写法：复杂化了
        // if(this.$store.state.cartList.find(item => !item.checked)){
        //   return false
        // }else return true

        // 简洁写法
        if(this.$store.state.cartList.length === 0) return false
        return !this.$store.state.cartList.find(item => !item.checked); //此行代码对应原始写法
      },
      //总价格
      calcTotal(){
        return this.$store.state.cartList.filter(item => item.checked).reduce((preValue, item) => {
          return preValue + item.price * item.count
        },0)
      },
      // 计算商品件数
      toCalc(){
        return this.$store.state.cartList.filter(item => item.checked).reduce((preValue, item) => {
          return preValue + item.count
        },0)
      }
    },
    methods:{
      // 判断是否全选
      checkedAll(){
        //全部选中时
        if(this.judgeChecked){
          this.$store.state.cartList.forEach(item => item.checked = false)
        //部分选中或者全部选中时
        }else{
          this.$store.state.cartList.forEach(item => item.checked = true)
        }
      },
      // 去结账
      checkOut(){
        !this.$store.state.cartList.find(item => item.checked) ? this.$refs.toast.show('您还没选中商品') : ''
      }
    }
  }
</script>

<style scoped>
  #bottom-bar{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 49px;
    background-color: #eee;
    height: 40px;
    line-height: 40px;
    display: flex;
    text-align: center;
    font-size: 13px;
  }
  .left{
    display: flex;
    /*width: 70px;*/
    padding: 0 17px;
  }
  .right{
    width: 80px;
    background-color: #ff5777;
    color: #f2f5f8;
  }
  .center{
    flex: 1;
  }

</style>